内容管理列表布局
内容管理页面使用 Table + Pagination 的经典布局。在实现过程中需要解决一个栅栏布局的 Bug。
布局结构
┌──────────────────────────────┐
│ 搜索/筛选区域 │
├──────────────────────────────┤
│ ┌────┬────┬────┬────┬────┐ │
│ │标题│分类│状态│时间│操作│ │
│ ├────┼────┼────┼────┼────┤ │
│ │... │... │... │... │... │ │
│ └────┴────┴────┴────┴────┘ │
├──────────────────────────────┤
│ 分页器 │
└──────────────────────────────┘
text
栅栏布局 Bug 修复
使用 el-row + el-col 做栅栏布局时，如果表格列的宽度设置不当，会导致表格溢出或布局错乱。
问题原因：el-col 的 span 属性按 24 等分计算宽度，但表格的列宽是独立计算的，两者可能不一致。
解决方案：表格使用 flex 布局替代栅栏布局，确保宽度自适应：
.table-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.table-wrapper .el-table {
flex: 1;
overflow: hidden;
}
css
完整实现
<template>
<div class="content-list">
<!-- 搜索区域 -->
<el-form :inline="true" class="search-form">
<el-form-item label="标题">
<el-input v-model="searchForm.title" placeholder="请输入标题" />
</el-form-item>
<el-form-item label="分类">
<el-select v-model="searchForm.category" placeholder="请选择">
<el-option label="全部" value="" />
<el-option label="推荐好课" value="recommend" />
<el-option label="每日一课" value="daily" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch">搜索</el-button>
</el-form-item>
</el-form>
<!-- 表格区域 -->
<el-table :data="tableData" border stripe>
<el-table-column prop="title" label="标题" min-width="200" />
<el-table-column prop="category" label="分类" width="120" />
<el-table-column prop="status" label="状态" width="80">
<template #default="{ row }">
<el-tag :type="row.status === 1 ? 'success' : 'info'">
{{ row.status === 1 ? '已发布' : '草稿' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="createdAt" label="创建时间" width="180" />
<el-table-column label="操作" width="150" fixed="right">
<template #default="{ row }">
<el-button size="small" @click="handleEdit(row)">编辑</el-button>
<el-button size="small" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
v-model:current-page="currentPage"
:total="total"
:page-size="10"
layout="prev, pager, next, total"
/>
</div>
</template>
vue
↑